<template>
	<view>
		<l-echart ref="chart" @finished="init" :id="id"></l-echart>
	</view>
</template>

<script>
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import * as echarts from 'echarts'
	export default {
		props: {
			id: {
				type: String,
				default: 'Echart',
			},
			options: {
				type: Object,
				default: () => ({}),
			},
		},
		components: {
			LEchart
		},
		data() {
			return {
				option: {},
			}
		},
		mounted() {
			var color = [];
			// var legend = [];
			var seriesData = [];
			
			this.options.data.forEach(e=> {
				color.push(e.color)
				// legend.push(e.name)
				seriesData.push({
					name: e.name,
					value: e.value
				})
			})
			
			var data = {
				color: color,
				// legend: {
				//     icon: 'circle',
				//     bottom: '20',
				//     right: 'center',
				//     itemWidth: 10,
				//     textStyle: {
				        
				//     },
				//     data: legend,
				// },
				series: [{
				    name: '需求类型占比',
				    type: 'pie',
				    center: ['50%', '45%'],
				    radius: '90%',
				    label: {
				        normal: {
				            show: false,
				        },
				    },
				    labelLine: {
				        show: false,
				        length: 0,
				        length2: 0,
				    },
				    itemStyle: {
				        borderColor: '#fff',
				    },
				    data: seriesData,
				}],
			}
			this.option = data
		},
		methods: {
			async init() {
				const chart = await this.$refs.chart.init(echarts);
				chart.setOption(this.option);
			},
		},
	};
</script>

<style scoped>
	
</style>